<template>
  <el-table
    :data="tableData"
    style="width: 100%; marginTop: 20px;"
    :header-cell-style="{background:'rgba(250,250,250,1)',color:'#606266'}"
  >
    <el-table-column type="selection" width="50"></el-table-column>

    <el-table-column prop="name" label="商圈名称" width="200">
      <template slot-scope="scope">
        <div class="flex_center_between">
          <el-image
            style="width: 60px; height: 60px"
            :src="scope.row.shop && scope.row.shop.logo || ''"
            fit="contain"
          ></el-image>
          <span
            class="ellipsis2"
            style="width: 120px;marginLeft:10px;"
          >{{scope.row.shop && scope.row.shop.name||'暂无数据'}}</span>
        </div>
      </template>
    </el-table-column>

    <el-table-column prop="createdAt" label="位置"></el-table-column>

    <el-table-column prop="province" label="关联商家" align="center">
      <template slot-scope="scope">{{scope.row.shop && scope.row.shop.province ||'暂无数据'}}</template>
    </el-table-column>

    <el-table-column prop="city" label="推荐语" align="center">
      <template slot-scope="scope">{{scope.row.shop && scope.row.shop.city||'暂无数据'}}</template>
    </el-table-column>

    <el-table-column prop="region" label="推荐标签" align="center">
      <template slot-scope="scope">{{scope.row.shop && scope.row.shop.region||'暂无数据'}}</template>
    </el-table-column>

    <el-table-column prop="mobile" label="所属分类" width="112">
      <template slot-scope="scope">{{scope.row.shop && scope.row.shop.user.mobile ||'暂无数据'}}</template>
    </el-table-column>

    <el-table-column header-align="right" align="right" prop="manipulate" label="操作" width="160">
      <template slot-scope="scope">
        <el-button type="text" @click="handleEdit(scope.row, 'del')">删除</el-button>
        <span class="shuxian"></span>
        <el-button type="text" @click="handleEdit(scope.row, 'xq')">详情</el-button>
        <span class="shuxian"></span>
        <el-button type="text" @click="handleEdit(scope.row, 'bj')">编辑</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  props: {
    tableData: {
      type: Array,
      dufault: () => []
    }
  },
  methods: {
    handleEdit (row, type) {
      this.$emit('handleEdit', row, type)
    }
  }
}
</script>

<style>
</style>
